// import { ModalForm } from "@ant-design/pro-components";
import { Modal } from 'antd';
import { useState, useEffect } from "react";
import { eventBus } from '@/utils/EventBus';
/** @jsxRuntime classic */
/** @jsx jsxCustomEvent */
import jsxCustomEvent from '@micro-zoe/micro-app/polyfill/jsx-custom-event'

export default function GlobalModal() {

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [config, setConfig] = useState({});

  
  // 监听事件总线中的 openModal 事件
  useEffect(() => {
    // 打开弹窗
    const openModal = () => {
      setIsModalVisible(true);
    }
    eventBus.on('openModal', (attr) => {
      setConfig(attr);
      openModal();
    });
    eventBus.on('closeModal', (attr) => {
      closeModal();
    });

    return () => {
      eventBus.off('openModal', openModal);
      eventBus.off('closeModal', closeModal);
    };
  }, []);

  // 关闭弹窗
  const closeModal = () => {
    setIsModalVisible(false);
  }

  return (
    <Modal
      {...config}
      width={ config.width || '400px'}
      onCancel={closeModal}
      open={isModalVisible} // 控制弹窗显示
      onOpenChange={setIsModalVisible}
      modalProps={{ destroyOnClose: true }}
      onFinish={closeModal}
      grid={true}
    >
      {config.type === 'link' && <micro-app style={{ height: config.height || '100%', width: '100%', overflow: 'hidden' }} name={config.name} url={config.url} keep-alive iframe></micro-app> }
      {config.type !== 'link' && config.content }
    </Modal>
  );
}
